<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>详情</title>
    <link rel="stylesheet" type="text/css" href="{{ asset('index/static/css/main.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('index/layui/css/layui.css') }}">
    <script type="text/javascript" src="{{ asset('index/layui/layui.js') }} "></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>





<div class="content content-nav-base datails-content">
    <div class="main-nav">
        <div class="inner-cont0">
            <div class="inner-cont1 w1200">
                <div class="inner-cont2">
                    <a href="commodity.html" class="active">所有商品</a>
                    <a href="buytoday.html">今日团购</a>
                    <a href="information.html">母婴资讯</a>
                    <a href="about.html">关于我们</a>
                </div>
            </div>
        </div>
    </div>
    <div class="data-cont-wrap w1200">
        <div class="crumb">
            <a href="javascript:;">首页</a>
            <span>></span>
            <a href="javascript:;">所有商品</a>
            <span>></span>
            <a href="javascript:;">产品详情</a>
        </div>
        <div class="product-intro layui-clear">
            <div class="preview-wrap">
                <a href="javascript:;"><img style="width: 402px;height: 402px" src="/{{$goods['main_image']}}"></a>
                <div style="margin-top: 10px">
                    @foreach ($goods['multi_image'] as $multi_image)
                    <img style="width: 80px;height: 80px" src="/{{$multi_image}}">
                    @endforeach
                </div>
            </div>
            <div class="itemInfo-wrap">
                <div class="itemInfo">
                    <div class="title">
                        <h4>{{$goods['name']}} </h4>
                        <input type="hidden" id="sku_id" value="{{$goods['sku_id']}}">
                        <input type="hidden" id="goods_id" value="{{$goods['id']}}">
                        <span><i class="layui-icon layui-icon-rate-solid"></i>收藏</span>
                    </div>
                    <div class="summary">
                        <p class="reference"><span>参考价</span> <del>￥{{$goods['origi_price']}}</del></p>
                        <p class="activity"><span>活动价</span><strong class="price"><i>￥</i><span id="price" >{{$goods['price']}}</span></strong></p>
                        <p class="address-box"><span></span><strong class="address">{{$goods['promo_title']}}</strong></p>
                    </div>
                    <div class="choose-attrs">
                        @foreach ($goods['sku'] as $good_sku)
                        <div class="color layui-clear"><span class="title">{{$good_sku['name']}}</span>
                            <div class="color-cont">
                                @foreach ($good_sku['data'] as $good_sku_data)
                                <span class="btn @if ($good_sku_data['active'] == 1) active @endif " data-id="{{$good_sku_data['id']}}">{{$good_sku_data['name']}}</span>
                                @endforeach
                            </div>
                        </div>
                        @endforeach
                        <div class="number layui-clear"><span class="title">数&nbsp;&nbsp;&nbsp;&nbsp;量</span><div class="number-cont"><span class="cut btn">-</span><input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" maxlength="4" type="" name="" value="1"><span class="add btn">+</span></div></div>
                    </div>
                    <div class="choose-btns">
                        <button class="layui-btn layui-btn-primary purchase-btn">库    存： <span id="stock" >{{$goods['stock']}}</span></button>
                        <button class="layui-btn  layui-btn-danger car-btn"><i class="layui-icon layui-icon-cart-simple"></i>加入购物车</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-clear">
            <div class="aside">
                <h4>热销推荐</h4>
                <div class="item-list">
                    <div class="item">
                        <img src="/index/static/img/details_img2.jpg">
                        <p><span>可爱宝宝粉色连体秋裤</span><span class="pric">￥99.00</span></p>
                    </div>
                    <div class="item">
                        <img src="/index/static/img/details_img2.jpg">
                        <p><span>可爱宝宝粉色连体秋裤</span><span class="pric">￥99.00</span></p>
                    </div>
                    <div class="item">
                        <img src="/index/static/img/details_img2.jpg">
                        <p><span>可爱宝宝粉色连体秋裤</span><span class="pric">￥99.00</span></p>
                    </div>
                    <div class="item">
                        <img src="/index/static/img/details_img2.jpg">
                        <p><span>可爱宝宝粉色连体秋裤</span><span class="pric">￥99.00</span></p>
                    </div>
                    <div class="item">
                        <img src="/index/static/img/details_img2.jpg">
                        <p><span>可爱宝宝粉色连体秋裤</span><span class="pric">￥99.00</span></p>
                    </div>
                    <div class="item">
                        <img src="/index/static/img/details_img2.jpg">
                        <p><span>可爱宝宝粉色连体秋裤</span><span class="pric">￥99.00</span></p>
                    </div>
                </div>
            </div>
            <div class="detail">
                <h4>详情</h4>
                <div class="item">
                    <img src="/index/static/img/details_imgbig.jpg">
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    layui.config({
        base: '/index/static/js/util' //你存放新模块的目录，注意，不是layui的模块目录
    }).use(['jquery','form'],function(){
        var $ = layui.$,form = layui.form;
        var cur = $('.number-cont input').val();
        $('.number-cont .btn').on('click',function(){
            if($(this).hasClass('add')){
                cur++;

            }else{
                if(cur > 1){
                    cur--;
                }
            }
            $('.number-cont input').val(cur)
        })

        $('.car-btn').on('click',function(){

           var sku_id = $("#sku_id").val();
           var num = cur;
           console.log(sku_id, num)
            $.ajax({
                type:"post",
                url:"/addCart",
                data:{'sku_id':sku_id, 'num':num},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success:function(res) {
                    data = JSON.parse(res)

                    if(data.code==200){
                        layer.msg(data.msg);
                    }else {
                        layer.msg(data.msg, {icon: 2, time: 1500}, );
                    }
                },
                error:function(data) {
                    console.log('err');
                }
            });

        });

        $('.color .btn').on('click',function(){

            $(this).siblings().removeClass('active');
            $(this).addClass('active');

            getSkuInfo()

        });

        function getSkuInfo() {
            var arr = [];
            $(".color .btn").each(function () {
                if($(this).hasClass("active")){
                    var arr_sub = $(this).attr('data-id');
                    arr.push(arr_sub)
                }
            })
            getGoodsSkuBySkuSpeciValueId(arr)
            console.log(arr)
            
        }
        
        function getGoodsSkuBySkuSpeciValueId(arr) {
            var id = $("#goods_id").val();
            $.ajax({
                type:"get",
                url:"/getGoodsSkuBySkuSpeciValueId",
                data:{'speciValueIds':arr.join(','),'id':id},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success:function(res) {
                    res = JSON.parse(res)
                    console.log(res);
                    if(res.code==200){

                        $("#sku_id").val(res.data.id)
                        $("#price").html(res.data.price)
                        $("#stock").html(res.data.stock)
                        return false;
                    }else {
                        layer.msg(res.msg, {icon: 2, time: 1500}, );
                    }
                },
                error:function(data) {
                    console.log('err');
                }
            });
        }

    });



</script>


</body>
</html>